// 本文件内JS专用于导航栏nav
document.addEventListener('DOMContentLoaded', function () {
    var nav = document.getElementById('nav');
    var tabs = document.getElementById('tabs');
    var line = document.getElementById('line');
    var sub = document.getElementById('sub');
    var backTop = document.getElementById('backTop');
    var menu = document.getElementById('menu') || null;
    var mobileNav = document.getElementById('mobileNav');
    var mobileProductShow = document.getElementById('mobileProductShow');

    // 回到顶部动画效果函数
    function scrollToTop() {
        let dis = document.documentElement.scrollTop || document.body.scrollTop;
        if (dis > 0) {
            window.requestAnimationFrame(scrollToTop);
            window.scrollTo(0, dis - dis / 3);      // 递减 缓动效果
        }
    };

    // 非移动端导航栏动画函数
    function PCNavi() {
        // 导航栏粘滞
        window.addEventListener('scroll', function () {
            // console.log(window.scrollY);
            if (window.scrollY > 98) {
                nav.style.padding = '0';
                nav.style.position = 'fixed';
                nav.style.top = '0';
                nav.style.backgroundColor = 'rgba(0, 0, 0, .6)';
            
                // 返回顶部按钮出现
                // backTop.style.display = 'block';
                backTop.style.opacity = '1';
                backTop.style.zIndex = '1';
            } else {
                nav.style.paddingTop = '50px';
                nav.style.position = 'absolute';
                nav.style.backgroundColor = 'transparent';
            
                // backTop.style.display = 'none';
                backTop.style.opacity = '0';
                backTop.style.zIndex = '-1';
            }
        });
    
        // 选择时的线条动画
        tabs.addEventListener('mouseover', function (e) {
            line.style.display = 'block';
            // console.log(e.target.nodeName);
            if (e.target.nodeName.toUpperCase() === 'LI') {
                // console.log(e.target.offsetLeft);
                let distance = e.target.offsetLeft;
                line.style.left = distance + 'px';
            } else {}
        
            // 下拉框持续显示
            if (e.target.id === 'product' || e.target.id === 'subtabs' || e.target.id === 'sub' || e.target.nodeName.toUpperCase() === 'A') {
                sub.style.display = 'block';
            } else {
                sub.style.display = 'none';
            }
        });

        // 离开范围下拉框消失
        sub.addEventListener('mouseleave', function () {
            sub.style.display = 'none';
        })
    
        // 离开范围线条消失
        tabs.addEventListener('mouseleave', function () {
            line.style.display = 'none';
        });
    
        // 点击返回顶部触发动画
        backTop.addEventListener('click', scrollToTop);
    };

    // 移动端导航栏动画函数
    function mobileNavi() {
        window.addEventListener('scroll', function () {
            // console.log(window.scrollY);
            if (window.scrollY > 98) {
                nav.style.position = 'fixed';
                nav.style.top = '0';
                nav.style.backgroundColor = 'rgba(0, 0, 0, .6)';
            
                // 返回顶部按钮出现
                backTop.style.opacity = '1';
                backTop.style.zIndex = '1';
            } else {
                nav.style.padding = '0';
                nav.style.position = 'absolute';
                nav.style.backgroundColor = 'rgba(0, 0, 0, .7)';
            
                backTop.style.opacity = '0';
                backTop.style.zIndex = '-1';
            }
        });

        // 点击返回顶部触发动画
        backTop.addEventListener('click', scrollToTop);
    };

    // 移动端导航栏菜单按钮事件函数
    function menuClick() {
        menu = document.getElementById('menu') || null;
        mobileNav.style.opacity = '0';
        mobileNav.style.left = '-4rem';
        mobileNav.style.zIndex = '-1';
        menu.addEventListener('click', function(e) {
            e.stopPropagation();
            if (mobileNav.style.opacity === '0') {
                mobileNav.style.opacity = '1';
                mobileNav.style.left = '0';
                mobileNav.style.zIndex = '99991';
            } else {
                mobileNav.style.opacity = '0';
                mobileNav.style.left = '-4rem';
                mobileNav.style.zIndex = '-1';
            }
        });

        // 点击其他地方也收回
        document.addEventListener('click', function(e) {
            // console.log(e.target);
            if (e.target !== mobileNav && e.target !== mobileProductShow && mobileNav.style.opacity === '1') {
                mobileNav.style.opacity = '0';
                mobileNav.style.left = '-4rem';
                mobileNav.style.zIndex = '-1';
            }
        });

        // 产品展示手风琴效果
        mobileProductShow.addEventListener('click', function() {
            if (mobileProductShow.isdrop) {
                mobileProductShow.parentNode.style.height = '1.0667rem';
            } else {
                mobileProductShow.parentNode.style.height = '7.2rem';
            }
            mobileProductShow.isdrop = !mobileProductShow.isdrop;
        });
    };

    
    var initialWidth = window.innerWidth;
    if (initialWidth >= 768) {
        PCNavi();
    } else {
        mobileNavi();
        menuClick();
    }
 
    // 监听resize事件
    window.addEventListener('resize', function() {
        // console.log(window.innerWidth); => success
        // 移动端大小
        if (window.innerWidth >= 768) {
            PCNavi();
        } else {
            mobileNavi();
            menuClick();
        }
    });

});
